<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="keywords" content="admin, dashboard, bootstrap, template, flat, modern, theme, responsive, fluid, retina, backend, html5, css, css3">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>2022公积金可视化页面 </title>

    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <div th:replace="common :: #leftmenu"></div>

    <!-- main content start-->
    <div class="main-content" >

        <div th:replace="common :: headermenu"></div>

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                2022年公积金数据
            </h3>
            <ul class="breadcrumb">
                <li>

                </li>
            </ul>
            <div class="state-info">
                <section class="panel">
                    <div class="panel-body"  style="padding-right: 150px;width: 300px">
                        <div class="summary">
                            <span>2022汇缴金额总额</span>
                            <h3 class="green-txt" id="TotalMoney"></h3>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-md-6">
                    <!--statistics start-->
                    <div class="row state-overview">
                        <div class="col-md-6 col-xs-12 col-sm-6">
                            <div class="panel purple">
                                <div class="symbol">
                                    <i class="fa fa-gavel"></i>
                                </div>
                                <div class="state-value">
                                    <div class="value" id="onlineChannel">230</div>
                                    <div class="title">网上渠道</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-sm-6">
                            <div class="panel red">
                                <div class="symbol">
                                    <i class="fa fa-tags"></i>
                                </div>
                                <div class="state-value">
                                    <div class="value" id="guimianChannel">3490</div>
                                    <div class="title">柜面渠道</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row state-overview">
                        <div class="col-md-6 col-xs-12 col-sm-6">
                            <div class="panel blue">
                                <div class="symbol">
                                    <i class="fa fa-money"></i>
                                </div>
                                <div class="state-value">
                                    <div class="value" id="autoChannel">22020</div>
                                    <div class="title"> 自动扣款</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--statistics end-->
                </div>
                <div class="col-md-6">
                    <!--more statistics box start-->
                    <div>
                        <div id="ThreePartsInOneYear" style="height: 250px;background: #7B68EE	">

                        </div>
                    </div>
                    <!--more statistics box end-->
                </div>
            </div>

            <div class="row">
                <div style="width: 100%;height: 490.35px;padding-left: 50px" id="twelveMonthData">

                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2022 &copy; 上海承大 年度数据可视化 </a>
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<div th:replace="common :: #commonscript"></div>


<!--这边是用于获取与展示具体数据的js-->
<script type="text/javascript" th:inline="javascript">
    //12个月的集合
    let monthVos  = [[${year.monthVos}]];
    //六项数据的总和
    let totalRetentionPayment = 0;
    let totalOnlineBanking = 0;
    let totalBankAccounting = 0;
    let totalCheck = 0;
    let totalCreditVoucher = 0;
    let totalConsignmentCollection = 0;
    for (let i = 0; i < monthVos.length; i++) {
        totalRetentionPayment+=monthVos[i].onlineChannelVo.retentionPayment;
        totalOnlineBanking +=monthVos[i].onlineChannelVo.onlineBanking;
        totalBankAccounting+=monthVos[i].cabinetSideChannelVo.bankAccounting;
        totalCheck+=monthVos[i].cabinetSideChannelVo.check;
        totalCreditVoucher+=monthVos[i].cabinetSideChannelVo.creditVoucher;
        totalConsignmentCollection+=monthVos[i].autoChannelVo.consignmentCollection
    }

    //设置总额
    var totalMoney = document.getElementById("TotalMoney");
    var total = (totalRetentionPayment+totalOnlineBanking+totalBankAccounting+totalCheck+totalCreditVoucher+totalConsignmentCollection)/100000000;
    totalMoney.textContent = total.toFixed(2)+'亿'
    //设置三个渠道
    var onlineChannel = document.getElementById("onlineChannel");
    var guimianChannel = document.getElementById("guimianChannel");
    var autoChannel = document.getElementById("autoChannel");
    onlineChannel.textContent=((totalRetentionPayment+totalOnlineBanking)/100000000).toFixed(2)+'亿';
    guimianChannel.textContent=((totalBankAccounting+totalCheck+totalCreditVoucher)/100000000).toFixed(2)+'亿';
    autoChannel.textContent=(totalConsignmentCollection/100000000).toFixed(2)+'亿';

    var ThreePartsInOneYear = echarts.init(document.getElementById('ThreePartsInOneYear'));
    option1 = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}亿 ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['网上渠道','柜面渠道','自动扣款']
        },
        series : [
            {
                name: '全年汇缴',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:((totalRetentionPayment+totalOnlineBanking)/100000000).toFixed(2), name:'网上渠道'},
                    {value:((totalBankAccounting+totalCheck+totalCreditVoucher)/100000000).toFixed(2), name:'柜面渠道'},
                    {value:(totalConsignmentCollection/100000000).toFixed(2), name:'自动扣款'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    ThreePartsInOneYear.setOption(option1);

    var twelveMonthData = echarts.init(document.getElementById('twelveMonthData'));
    option2 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'value'
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12'],
        },
        series: [
            {
                name: '网站',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
                data: [monthVos[0].onlineChannelVo.retentionPayment,monthVos[1].onlineChannelVo.retentionPayment,monthVos[2].onlineChannelVo.retentionPayment,monthVos[3].onlineChannelVo.retentionPayment,monthVos[4].onlineChannelVo.retentionPayment,monthVos[5].onlineChannelVo.retentionPayment,monthVos[6].onlineChannelVo.retentionPayment,monthVos[7].onlineChannelVo.retentionPayment,monthVos[8].onlineChannelVo.retentionPayment,monthVos[9].onlineChannelVo.retentionPayment,monthVos[10].onlineChannelVo.retentionPayment,monthVos[11].onlineChannelVo.retentionPayment]
            },
            {
                name: '建行网银',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
                data: [monthVos[0].onlineChannelVo.onlineBanking,monthVos[1].onlineChannelVo.onlineBanking,monthVos[2].onlineChannelVo.onlineBanking,monthVos[3].onlineChannelVo.onlineBanking,monthVos[4].onlineChannelVo.onlineBanking,monthVos[5].onlineChannelVo.onlineBanking,monthVos[6].onlineChannelVo.onlineBanking,monthVos[7].onlineChannelVo.onlineBanking,monthVos[8].onlineChannelVo.onlineBanking,monthVos[9].onlineChannelVo.onlineBanking,monthVos[10].onlineChannelVo.onlineBanking,monthVos[11].onlineChannelVo.onlineBanking]
            },
            {
                name: '银行卡转账',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
                data: [monthVos[0].cabinetSideChannelVo.bankAccounting,monthVos[1].cabinetSideChannelVo.bankAccounting,monthVos[2].cabinetSideChannelVo.bankAccounting,monthVos[3].cabinetSideChannelVo.bankAccounting,monthVos[4].cabinetSideChannelVo.bankAccounting,monthVos[5].cabinetSideChannelVo.bankAccounting,monthVos[6].cabinetSideChannelVo.bankAccounting,monthVos[7].cabinetSideChannelVo.bankAccounting,monthVos[8].cabinetSideChannelVo.bankAccounting,monthVos[9].cabinetSideChannelVo.bankAccounting,monthVos[10].cabinetSideChannelVo.bankAccounting,monthVos[11].cabinetSideChannelVo.bankAccounting]
            },
            {
                name: '支票',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
                data: [monthVos[0].cabinetSideChannelVo.check,monthVos[1].cabinetSideChannelVo.check,monthVos[2].cabinetSideChannelVo.check,monthVos[3].cabinetSideChannelVo.check,monthVos[4].cabinetSideChannelVo.check,monthVos[5].cabinetSideChannelVo.check,monthVos[6].cabinetSideChannelVo.check,monthVos[7].cabinetSideChannelVo.check,monthVos[8].cabinetSideChannelVo.check,monthVos[9].cabinetSideChannelVo.check,monthVos[10].cabinetSideChannelVo.check,monthVos[11].cabinetSideChannelVo.check]
            },
            {
                name: '委托收款',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
                data: [monthVos[0].autoChannelVo.consignmentCollection,monthVos[1].autoChannelVo.consignmentCollection,monthVos[2].autoChannelVo.consignmentCollection,monthVos[3].autoChannelVo.consignmentCollection,monthVos[4].autoChannelVo.consignmentCollection,monthVos[5].autoChannelVo.consignmentCollection,monthVos[6].autoChannelVo.consignmentCollection,monthVos[7].autoChannelVo.consignmentCollection,monthVos[8].autoChannelVo.consignmentCollection,monthVos[9].autoChannelVo.consignmentCollection,monthVos[10].autoChannelVo.consignmentCollection,monthVos[11].autoChannelVo.consignmentCollection]
            },
            {
                name: '贷记凭证',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
                data: [monthVos[0].cabinetSideChannelVo.creditVoucher,monthVos[1].cabinetSideChannelVo.creditVoucher,monthVos[2].cabinetSideChannelVo.creditVoucher,monthVos[3].cabinetSideChannelVo.creditVoucher,monthVos[4].cabinetSideChannelVo.creditVoucher,monthVos[5].cabinetSideChannelVo.creditVoucher,monthVos[6].cabinetSideChannelVo.creditVoucher,monthVos[7].cabinetSideChannelVo.creditVoucher,monthVos[8].cabinetSideChannelVo.creditVoucher,monthVos[9].cabinetSideChannelVo.creditVoucher,monthVos[10].cabinetSideChannelVo.creditVoucher,monthVos[11].cabinetSideChannelVo.creditVoucher]
            }
        ]
    };
    twelveMonthData.setOption(option2);
</script>

</body>
</html>
